<template>
  <div class="home">

    <br/>

    <el-card shadow="always">
      机房机柜监控图
    </el-card>
    <br>
    <br>

    <!-- 备注 -->
    <el-card shadow="always">
      备注事项: 
      <br>
      <br>
      1. 一级自己抓
      <br>
      <br>
      2. 二级vceneter抓一部分 + 另外一部分自己抓
      <br>
      <br>
      3. 添加字段: 进程延迟、模块调用、数据库延迟、sesstion会话、数据库队列、
      <br>
      <br>
      4. 三种颜色对应三种不同设备: 利旧、第三方、新购
      <br>
      <br>
      5. 机柜U数只显示设备名称、IP(浮动显示)、


    </el-card>

    <br>
    

    <!-- <img src="./imgs/m1.png" alt=""> -->
    <img src="./imgs/m2.png" alt="" style="float: right">

    <el-row style="width: 300px; float: left">
      <el-col :span="24" style=" border: 1px solid #888; text-align: center; height: 40px ">
        A1
        <el-radio-group v-model="radio1" size="small" style="margin-top: 4px;" @change="changeSort">
          <el-radio-button label="正序"></el-radio-button>
          <el-radio-button label="倒序"></el-radio-button>
        </el-radio-group>
      </el-col>
      <div v-for="(item, index) in dats" :key="index">
        <el-col :span="4"  :style="{height: `${item.num * 20}px`}" style=" border: 1px solid #888; height: 10px" >
          <div style="text-align: center;">{{item.id}}U</div>
        </el-col>
        <el-col :span="20" @click.native="clickU(item)" :style="{height: `${item.num * 20}px`}" style=" border: 1px solid #888" >
          <span :style="{background: `${item.color}`}" style=" width: 15px; height: 15px; margin: 0px 10px 0px 10px; display: inline-block; border-radius: 33px; float: right"></span>
          {{item.name}} 
        </el-col>
      </div>
    </el-row>

    <el-row style="width: 300px; float: left; margin-left: 20px">
      <el-col :span="24" style=" border: 1px solid #888; text-align: center; height: 40px ">
        A2
        <el-radio-group v-model="radio2" size="small" style="margin-top: 4px;" @change="changeSort">
          <el-radio-button label="正序"></el-radio-button>
          <el-radio-button label="倒序"></el-radio-button>
        </el-radio-group>
      </el-col>
      <div v-for="(item, index) in dats1" :key="index">
        <el-col :span="4"  :style="{height: `${item.num * 20}px`}" style=" border: 1px solid #888; height: 10px" >
          <div style="text-align: center;">{{item.id}}U</div>
        </el-col>
        <el-col :span="20" :style="{height: `${item.num * 20}px`}" style=" border: 1px solid #888" >
          <span :style="{background: `${item.color}`}" style=" width: 15px; height: 15px; margin: 0px 10px 0px 10px; display: inline-block; border-radius: 33px; float: right"></span>
          {{item.name}} 
        </el-col>
      </div>
    </el-row>

    <!-- 机柜占用 -->
    <el-dialog
      title="机柜占用"
      :visible.sync="addModel"
      width="40%">
        占用设备名称: <el-input style="width: 200px;"></el-input>
        <br>
        <br>
        占用U数范围: <el-input style="width: 50px"></el-input> - <el-input style="width: 50px"></el-input>
        
      <span slot="footer" class="dialog-footer">
        <el-button @click="addModel = false">取 消</el-button>
        <el-button type="primary" @click="addModel = false">占 用</el-button>
      </span>
    </el-dialog>




    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      addModel: false,
      radio1: '正序',
      radio2: '倒序',
      dats:  [],
      dats1:  [],
      tableData: [
        {
          aaa000: '策略管理平台',
          aaa111: 'elk',
          aaa222: '昌平数据中心',
          aaa333: '链路一',
          aaa444: 'URL',
          aaa555: '127.0.0.1',
          aaa777: 'zhu***01',
          aaa888: '******',
          aaa999: '127.0.0.2',
          aaa10: '',
        },
        {
          aaa000: '策略管理平台',
          aaa111: 'nginx',
          aaa222: '昌平数据中心',
          aaa333: '链路一',
          aaa444: 'URL',
          aaa555: '127.0.0.1',
          aaa777: 'zhu***01',
          aaa888: '******',
          aaa999: '127.0.0.2',
          aaa10: '',
        },
        {
          aaa000: 'OA平台',
          aaa111: 'mySSqul',
          aaa222: '昌平数据中心',
          aaa333: '链路一',
          aaa444: 'URL',
          aaa555: '127.0.0.1',
          aaa777: 'zhu***01',
          aaa888: '******',
          aaa999: '127.0.0.2',
          aaa10: '',
        },
        
      ]
    }
  },
  mounted () {
    this.mackMOck()
  },
  methods: {
    clickU (item) {
      console.log(item, 'clickU')
      if (item.name == undefined) {
        this.addModel = true
      }
    },
    mackMOck () {

      let arr = ['red', 'green', 'yellow', '#aaa']
      let arr1 = ['管理区交换机', '深信服负载均衡', 'xx项目']



      for(var i = 1; i < 43; i++) {


        this.dats.push({
          id: i,
          name:  arr1[Math.floor((Math.random()*arr.length))],
          color: arr[Math.floor((Math.random()*arr.length))],
          num: 1
        })

        this.dats1.unshift({
          id: i,
          name:  arr1[Math.floor((Math.random()*arr.length))],
          color: arr[Math.floor((Math.random()*arr.length))],
          num: 1
        })

      }
        console.log(this.dats, 'sss')

    },
    // 倒叙
    changeSort (value) {


      this.dats = [] //清空重绘

      console.log(value)

      let arr = ['red', 'green', 'yellow', '#aaa']
      let arr1 = ['管理区交换机', '深信服负载均衡', 'xx项目']


      if (value == '倒序') {
        for(var i = 1; i < 43; i++) {


          this.dats.unshift({
            id: i,
            name:  arr1[Math.floor((Math.random()*arr.length))],
            color: arr[Math.floor((Math.random()*arr.length))],
            num: 1
          })

        }
      } else {
        for(var i = 1; i < 43; i++) {


          this.dats.push({
            id: i,
            name:  arr1[Math.floor((Math.random()*arr.length))],
            color: arr[Math.floor((Math.random()*arr.length))],
            num: 1
          })

        }
      }
    }
  }
}
</script>

<style scoped>
</style>
